<template>
    <el-table v-loading="props.loading"  :data="props.data" :border="props.border" class="table-header">
      <el-table-column
        v-for="item in props.configuration"
        :fixed="item.fixed"
        :width="item.width"
        :minWidth="item.minWidth"
        :prop="item.prop"
        :label="item.label"
      >
        <template #default="scope">
          <slot :name="item.slotName" :row="scope.row" :index="scope.$index">{{
            scope.row[item.prop]
          }}</slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="props.pagination">
      <el-pagination
        v-model:page-size="params.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        v-model:currentPage="params.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.pageTotal"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
</template>

<script setup lang="ts" name="UserDefined">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
// 组件功能：1、通过slot形式可以自定义字段类型；2、自带分页功能，切换页码时会相应对应事件
export interface ColumnType {
  prop: string
  fixed?: true | 'left' | 'right' | false
  label: string
  width?: string | number
  minWidth?: string | number
  slotName?: string
}
interface PaginationType {
  pageNum: number
  pageSize: number
  pageTotal: number
}
interface Props {
  configuration: ColumnType[]
  pagination?: PaginationType
  data: Array<any>
    loading?:true|false;
  border?: true | false
  // 指定列进行行合并
  rowSpan?: number
  // 指定行进行列合并
  colSpan?: number
}
const props = withDefaults(defineProps<Props>(), {
  configuration: () => [],
  data: () => [],
  border: true,
  loading:false,
})

const emit = defineEmits(['on-pagination-change'])

// 定义储存需要合并列和行的二维数组
const mergeRowArr = computed(() => {
  const c = props.configuration.length
  let r = props.data.length
  const carr = new Array(c)
  let arr: any[] = []
  for (let i = 0; i < r; i++) {
    arr.push([...carr])
  }
  // 先进行行合并
  if (props.rowSpan) {
    // 循环要进行行合并的列
    for (let col = 0; col < props.rowSpan; col++) {
      const attribute = props.configuration[col].prop
      let rowVal: any = ''
      let rowIdenx = 0
      // 遍历所有数据
      for (let row = 0; row < props.data.length; row++) {
        if (row === 0) {
          rowVal = props.data[0][attribute]
          rowIdenx = 0
          arr[rowIdenx][col] = 1
        } else if (props.data[row][attribute] === rowVal) {
          arr[rowIdenx][col] += 1
          arr[row][col] = 0
        } else {
          rowVal = props.data[row][attribute]
          rowIdenx = row
          arr[row][col] = 1
        }
      }
    }
  }
  return arr
})
interface SpanMethodProps {
  row: any
  column: TableColumnCtx<any>
  rowIndex: number
  columnIndex: number
}
const spanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  // return{
  //         rowspan:1,
  //         colspan:  mergeRowArr.value[rowIndex][columnIndex],
  //       }
}

const params = reactive({
  pageNum: 1,
  pageSize: 10,
  pageTotal: 0,
})

// 监听pagination变化
watch(
  () => props.pagination,
  val => {
    console.log(props.pagination,'props.pagination')
    params.pageNum = val?.pageNum ? val.pageNum : 0
    params.pageSize = val?.pageSize ? val.pageSize : 0
    params.pageTotal = val?.pageTotal ? val.pageTotal : 0
  },{
    deep:true,
    immediate:true
  }
)

const onPaginationChange = () => {
  emit('on-pagination-change', params)
}

const handleCurrentChange = (val: number) => {
  params.pageNum = val
  onPaginationChange()
}
const handleSizeChange = (val: number) => {
  params.pageSize = val
  onPaginationChange()
}
</script>

<style scoped lang="less">
.table-header:deep(thead th) {
  background-color: #f2f3f5 !important;
  font-weight: 500;
  color: #333333 !important;
}
.pagination-box {
  width: 100%;
  display: flex;
  padding: 10px 0;
  justify-content: flex-end;
}
</style>
